<template>
	<view class="shop">
		<WXofficialAccount></WXofficialAccount>
		<view class="flex topBox">
			<image class="dingwei" src="https://img.aibbyp.com/wechatUser/dingwei.png" mode=""></image>
			<view class="ml8 f28 fb">
				{{address.ad_info.city ?address.ad_info.city:'全国'}}
			</view>

			<view class="flex flex1 inputBox mr24 ">
				<u-input class="flex1" placeholder="佳豪"
					@confirm="$wanlshop.to('/pages/product/list?type=goods&search='+keyword)" confirm-type="search"
					clearable v-model="keyword"></u-input>
				<view @click="$wanlshop.to('/pages/page/search?index=1&type=goods&search='+(keyword==''?'佳豪':keyword))"
					class="searchBtn ml12">
					搜索
				</view>
			</view>
		</view>
		<view class="mt12 tabsBox">
			<u-tabs-swiper ref="tabs1" :list="navList" :current="indexTabs" @change="change('tabs',$event)"
				:is-scroll="false" swiperWidth="750" active-color='#FD5241' font-size='32rpx'
				bg-color='transparent'></u-tabs-swiper>
		</view>
		<swiper class="swiperBox" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tag, index) in tabsData" :key="index">
				<scroll-view @scroll="scroll" :scroll-top="scrollTop" scroll-with-animation="true" scroll-y
					style="height: 100%;" class="scroll-Y" @scrolltolower="onreachBottom" lower-threshold="100"
					@refresherrefresh='refresherrefresh' :refresher-triggered="triggered" :refresher-enabled='true'>
					<!-- 关注店铺 -->
					<view class="dataBox1 dataBox2" v-show="swiperCurrent == 0 ">
						<wanl-empty text="没有找到任何店铺" v-if="tag.loaded === true && tag.goodsData.length === 0" />
						<view class="msFoxBox" v-for="(item,index) in tag.goodsData" :key="index" v-if="tag.goodsData">
							<view class="flex_ac" @click="$wanlshop.to('/pages/shop/index?id=' + item.id)">
								<image class="msFoxBoxHeadImg" :src="$wanlshop.oss(item.avatar)" mode="">
								</image>
								<view class="ml16 flex1 rightBox overflow_1">
									<view class="f28 fb flex ">
										<view class="flex1">
											{{item.shopname}}
										</view>
										<view class="f20  tar ml8">
											距您 {{item.distance}}km
										</view>
									</view>
									<view class="flex mt12 couponsBox" v-if="item.coupons">
										<block v-for="(coupons,couponsIndex) in item.coupons" :key="couponsIndex"
											v-if="couponsIndex < 2">
											<view class="msi2 ml10 imgSize cf f16 flex"
												v-if="coupons.type == 'reduction'">
												<view class="msiBac">
													￥{{coupons.price}}
												</view>
												<image style="margin-left: -4rpx;height: 100%;"
													src="https://img.aibbyp.com/wechatUser/iconmj.png" mode="heightFix">
												</image>
											</view>
											<view class="msi1 ml10 imgSize cf f16 flex"
												v-if="coupons.type == 'discount'">
												<view class="msiBac">
													{{coupons.discount}}
												</view>
												<image style="margin-left: -4rpx;height: 100%;"
													src="https://img.aibbyp.com/wechatUser/iconzk.png" mode="heightFix">
												</image>
											</view>
											<view class="msi3 ml10 imgSize cf f16" v-if="coupons.type == 'shipping'">
											</view>
										</block>
									</view>
									<view class="flex mt12">
										<view class="sdsj">
											{{item.flash_send_time}}
										</view>
										<view class="sdfy ml12">
											预估运费：{{item.sendPrice}}元
										</view>

									</view>
								</view>
							</view>
							<view class="flex mt12">
								<view class="goodsBox" v-for="(item1,index3) in item.goods" :key="index3"
									@click="$wanlshop.to('/pages/product/goods?id='+item1.id)">
									<image class="imggoods" :src="$wanlshop.oss(item1.image)" mode="">
									</image>
									<view class="f24 overflow_1">
										{{item1.title}}
									</view>
									<view class="error f28">
										￥{{item1.price}}
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="tag.loadingType" :content-text="contentText" />
					</view>
					<!-- 推荐 -->
					<view class="" v-show="swiperCurrent == 1">
						<view class="dataBox1" style="padding-bottom: 0;">
							<view class="cgms cg br24 pb12" style="background-color: #fff;">
								<view class="flex_sb flex_warp">
									<view class="cgmsForBox cgmsForBox1 mt24"
										v-for="(item,key5) in cetegoryData.slice(0,9)" :key="key5"
										@click="$wanlshop.to('/pages/homeRecommend/classify/category?currentTab='+key5)">
										<image class="itemImg" :src="$wanlshop.oss(item.image) " mode=""></image>
										<view class="itemText f24 c1a mt8">
											{{item.name}}
										</view>
									</view>
									<view class="cgmsForBox cgmsForBox1 mt24"
										@click="$wanlshop.to('/pages/homeRecommend/classify/category')">
										<image class="itemImg" src="https://img.aibbyp.com/wechatUser/quanbu.png"
											mode="">
										</image>
										<view class="itemText f24 c1a mt8">
											全部
										</view>

									</view>
								</view>
							</view>
							<view class="flex_sb  fbdd">
								<view class="categoryBox" v-for="(item2,index) in categoryBoxList" :key="index"
									@click="$wanlshop.to(item2.path)">
									<image class="imgs" :src="item2.url" mode=""></image>
									<view class="f24 c3d ">
										{{item2.name}}
									</view>
								</view>
							</view>

							<!-- 优惠券 秒送 -- 新版  -->
							<view class="flex_sb cgmsBox">
								<view class="cgms cg" @click="$wanlshop.to('/pages/user/coupon/receiveList')">
									<view class="cf f28 fb tac">
										年中钜惠大促
									</view>
									<view class="flex_sb">
										<view v-for="(item, index4) in 2" :key="index4" class="yhq f36">
											<view class="" v-if="index4 == 0">
												满减
											</view>
											<view class=" " v-if="index4 == 1">
												折扣
											</view>

											<view class="f16" style="color: #FF9B9B;line-height: normal;">

												<text v-if="index4 == 0">
													大额优惠
												</text>
												<text v-if="index4 == 1">
													商品大促
												</text>
											</view>
										</view>
										<view v-if="false" v-for="(item, index4) in referenceCouponData" :key="index4"
											class="yhq f36"
											:class="item.type_text == '满减券' ? 'recommendBoxImg2' : item.type_text == '折扣券' ? 'recommendBoxImg1':'recommendBoxImg3'">
											<view class="" v-if="item.type_text == '满减券'">
												{{item.price}} <text class="f20">元</text>
											</view>
											<view class=" " v-if="item.type_text == '折扣券'">
												{{item.discount}}折
											</view>
											<view class=" " v-if="item.type_text == '包邮券'">
												包邮
											</view>
											<view class="f16" style="color: #FF9B9B;line-height: normal;">
												满{{item.limit}}可使用
											</view>
										</view>

									</view>
									<image class="xx22" src="https://img.aibbyp.com/wechatUser/xx22.png" mode="">
									</image>
								</view>
								<view class="cgms ms">
									<view class="flex_sb">
										<view class="cgmsForBox" v-for="(item,key6) in shopListData.slice(0,3)"
											@click="$wanlshop.to('/pages/shop/index?id='+item.id)" :key="key6">

											<image class="itemImg" :src="$wanlshop.oss(item.avatar)" mode="">
											</image>
											<view class="itemText f20 overflow_1" style="width: 100%;">
												{{item.distance}}km
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="dataBox1" style="padding:0 0 20rpx;margin-top:-10rpx ;">
							<!-- 空白页 -->
							<wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.goodsData.length === 0" />
							<wanl-product :shopnameType="true" :dataList="tag.goodsData" v-if="tag.goodsData"
								:shopType="shopType" />
							<uni-load-more :status="tag.loadingType" :content-text="contentText" />
						</view>
					</view>

					<!-- 秒送 -->
					<view class="dataBox1 dataBox2" v-show="swiperCurrent == 2">
						<wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.goodsData.length === 0" />
						<view class="msFoxBox" v-for="(item,index7) in tag.goodsData" :key="index7"
							v-if="tag.goodsData">
							<view class="flex_ac" @click="$wanlshop.to('/pages/shop/index?id=' + item.id)">
								<image class="msFoxBoxHeadImg" :src="$wanlshop.oss(item.avatar)" mode="">
								</image>
								<view class="ml16 flex1 rightBox overflow_1">
									<view class="flex">
										<view class="f28 fb flex1 flex_ac">
											<image v-if="item.self_suport == 1"
												style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
												src="https://img.aibbyp.com/wechatUser/allOthers/shopQJ.png" mode="">
											</image>
											<block class="" v-else>
												<image v-if="item.isself == 1"
													style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
													src="https://img.aibbyp.com/wechatUser/allOthers/shopZY.png"
													mode=""></image>
											</block>
											<view class="flex1 overflow_1">
												{{item.shopname}}
											</view>
										</view>
										<view class="f20 flex1 tar ml8">
											距您 {{item.distance}}km
										</view>
									</view>
									<view class="flex mt12 couponsBox" v-if="item.coupons">
										<block v-for="(coupons,couponsIndex) in item.coupons" :key="couponsIndex">
											<view class="msi2 ml10 imgSize cf f16 flex"
												v-if="coupons.type == 'reduction'">
												<view class="msiBac">
													￥{{coupons.price}}
												</view>
												<image style="margin-left: -4rpx;height: 100%;"
													src="https://img.aibbyp.com/wechatUser/iconmj.png" mode="heightFix">
												</image>
											</view>
											<view class="msi1 ml10 imgSize cf f16 flex"
												v-if="coupons.type == 'discount'">
												<view class="msiBac">
													{{coupons.discount}}
												</view>
												<image style="margin-left: -4rpx;height: 100%;"
													src="https://img.aibbyp.com/wechatUser/iconzk.png" mode="heightFix">
												</image>
											</view>
											<view class="msi3 ml10 imgSize cf f16" v-if="coupons.type == 'shipping'">
											</view>
										</block>
									</view>
									<view class="flex mt12">
										<view class="sdsj">
											{{item.flash_send_time}}
										</view>
										<view class="sdfy ml12">
											预估运费：{{item.sendPrice}}元
										</view>

									</view>
								</view>
							</view>
							<view class="flex mt12">
								<view class="goodsBox" v-for="(item1,index8) in item.goods" :key="index8"
									@click="$wanlshop.to('/pages/product/goods?id='+item1.id)">
									<image class="imggoods" :src="$wanlshop.oss(item1.image)" mode="">
									</image>
									<view class="f24 overflow_1">
										{{item1.title}}
									</view>
									<view class="error f28">
										￥{{item1.price}}
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="tag.loadingType" :content-text="contentText" />
					</view>
					<!-- 品牌专区 -->
					<view class="" v-show="swiperCurrent == 3">
						<view class="dataBox1" style="padding-bottom: 0;">
							<swiper :autoplay="false" interval="5000" duration="500">
								<block v-for="(item, index9) in swiperItems" :key="index9">
									<swiper-item>
										<view class="image-container">
											<view class="" @click="handleClickImage(img)"
												v-for="(img, imgIndex) in item" :key="imgIndex">
												<image :src="$wanlshop.oss(img.image) " class="swiper-image"></image>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
						<wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.goodsData.length === 0" />
						<wanl-product :shopnameType="true" :dataList="tag.goodsData" v-if="tag.goodsData"
							:shopType="shopType" />
						<uni-load-more :status="tag.loadingType" :content-text="contentText" />

					</view>

				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="xxxx" @click="to_top">
			<u-back-top v-show="old.scrollTop > 500" :custom-style='customstyle' class="backTop"
				:scroll-top="old.scrollTop">
				<u-icon name="https://img.aibbyp.com/wechat/images/top-icon.png" size="38"></u-icon>
			</u-back-top>
		</view>
		<!-- 领取优惠券 -->
		<u-mask :show="masks.show" @click="masks.show = false" v-if="masks.show">
			<view class="maskBox">
				<view class="maskBoxdata"
					:class="masks.data.type == 'reduction' ? 'imgmj':masks.data.type == 'discount' ? 'imgzk':'imgby'">
					<view class="fb">
						店铺{{masks.data.type == 'reduction' ? '满减券':masks.data.type == 'discount' ? '折扣券':'包邮券'}}
					</view>
					<view class="priceBox" v-if="masks.data.type == 'reduction'">
						<text class="price fb">{{masks.data.price}}</text>
						<text class="f12 pricedw ">元</text>
					</view>
					<view class="priceBox" v-if="masks.data.type == 'discount'">
						<text class="price fb">{{masks.data.discount}}</text>
						<text class="f12 pricedw ">折</text>
					</view>
					<view class="priceBox" v-if="masks.data.type == 'shipping'">
						<text class="price fb">包邮</text>
					</view>

					<view class="f24">
						满{{masks.data.limit}}可用
					</view>
					<view class="c3d f24" v-if="masks.data.pretype == 'fixed'">
						有效期至{{masks.data.enddate}}
					</view>
					<view class="c3d f24" v-if="masks.data.pretype == 'appoint'">
						有效天数{{masks.data.validity == 0 ? '永久' : masks.data.validity}}
					</view>

				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				categoryBoxList: [{
						name: '全屋装修',
						url: 'https://img.aibbyp.com/wechatUser/qt4.png',
						path: '/pages/craftsman/releaseOrder?type=0'
					},
					{
						name: '局部改造',
						url: 'https://img.aibbyp.com/wechatUser/qt3.png',
						path: '/pages/craftsman/releaseOrder?type=1',
					},
					{
						name: '维修',
						url: 'https://img.aibbyp.com/wechatUser/qt2.png',
						path: '/pages/craftsman/releaseOrder?type=2',
					},
					{
						name: '其他',
						url: 'https://img.aibbyp.com/wechatUser/qt1.png',
						path: '/pages/craftsman/releaseOrder?type=3',
					},
					// {
					// 	name: '排行榜',
					// 	url: 'https://img.aibbyp.com/wechatUser/category1/phb.png',
					// 	path: '/pages/artison/ranking/rankingInt',
					// },
				],
				old: {
					scrollTop: 0,
				},
				scrollTop: 0,
				customstyle: {
					opacity: 0.7,
					background: '#000',
				},
				address: {
					ad_info: {}
				},
				masks: {
					show: false,
				},
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				tabsData: [{
					params: {},
					id: 1,
					last_page: null,
					loadingType: 'more',
					goodsData: [],
					name: '关注店铺',
					key: '1',
					current_page: 1,
					loaded: false,
				}, {
					params: {},
					id: 2,
					last_page: null,
					loadingType: 'more',
					goodsData: [],
					current_page: 1,
					name: '推荐',
					key: 'goods',
					loaded: false,
				}, {
					params: {},
					id: 3,
					last_page: null,
					loadingType: 'more',
					current_page: 1,
					goodsData: [],
					name: '秒送',
					key: '2',
					loaded: false,
				}, {
					params: {},
					id: 4,
					current_page: 1,
					last_page: null,
					loadingType: 'more',
					goodsData: [],
					name: '品牌专区',
					key: 'goods',
					loaded: false,
				}],
				cetegoryData: [], //采购数据 -- 推荐
				shopListData: [], // 秒送数据 -- 推荐
				referenceCouponData: [],
				swiperItems: [], //品牌轮播数量
				//品牌轮播图
				keyword: '',
				navList: [{ //tabs 列表
						name: '关注店铺',
					},
					{
						name: '推荐',
					},
					// {
					// 	name: '年终狂欢节',
					// },
					{
						name: '秒送',
					},
					{
						name: '品牌专区',
					},
					// {
					// 	name: '新品',
					// }, {
					// 	name: '捡漏',
					// },
				],
				indexTabs: 1,
				swiperCurrent: 1,
				shopType: null, //组件type 判定是那个页面
				params: {
					search: '',
					sort: 'weigh', //排序
					order: 'asc', //升序降序asc desc
					page: 1,
					filter: {}, //过滤字段
					type: 'goods', // goods groups 商品 拼团
					op: {} //过滤条件
				},
				triggered: false,
				last_page: 1, //总页码
				status: 'loading',
				goodsData: [],
				contentText: {
					contentdown: '',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多数据了'
				}

			}
		},
		computed: {
			...mapState(['common', 'statistics', 'cart'])
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			// this.scrollTop = e.scrollTop;
		},
		created() {
			if (uni.getStorageSync('address') && uni.getStorageSync('address').ad_info) {
				this.address = uni.getStorageSync('address')
			}
			this.loadData('tabChange');
			this.getbrand()
			this.getshopList()
		},
		mounted() {

			//  如果vuex 里面没有数据 重新拉取数据
			if (this.common.modulesData.categoryModules.length != 0) {
				this.cetegoryData = this.common.modulesData.categoryModules
			} else {
				console.log('------------------------------');
				this.$store.dispatch('common/getServices')
				setTimeout(() => {
					this.cetegoryData = this.common.modulesData.categoryModules
				}, 500)
			}
			//  如果vuex 里面没有数据 重新拉取数据
		},
		// 监听返回
		onUnload() {},

		methods: {
			setSwiperCurrent(index) {
				this.indexTabs = index
				this.swiperCurrent = index; // 直接修改内部属性
			},
			to_top() { // 返回顶部
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			scroll(e) { // 经验 --监听滚动
				let g = this;
				this.old.scrollTop = e.detail.scrollTop
			},
			changeReferenceCoupon(data, index) { //领取优惠券
				this.masks.data = data
				this.masks.show = true
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					data: {
						id: data.id
					},
					success: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getshopList() { //获取秒送数据
				this.$api.get({
					url: '/wanlshop/product/shopList',
					data: {
						page: '1',
						limit: '3',
						type: '2',
					},
					success: res => {
						this.shopListData = res.data
					}
				})
			},

			getbrand() { //品牌数据
				this.$api.get({
					url: '/wanlshop/brand/index',
					success: res => {
						this.splitArray(res)
					}
				})
			},
			splitArray(res) { //计算品牌
				const chunkSize = 10;
				// 计算分块总数
				const totalChunks = Math.ceil(res.length / chunkSize); // 12
				// 切割存储
				for (let i = 0; i < totalChunks; i++) {
					const start = i * chunkSize;
					const end = start + chunkSize;
					this.swiperItems.push(res.slice(start, end));
				}
			},
			// 点击图片的处理函数
			handleClickImage(data) {
				uni.navigateTo({
					url: '/pages/shop/brand/brand?id=' + data.id + '&img=' + data.image + '&name=' + data.name
				})
				// 在这里添加你的点击逻辑，比如跳转到图片详情页
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件

			refresherrefresh(i) { // 上拉刷新
				if (this.triggered == false) {
					this.triggered = true
					let index = this.indexTabs;
					let navItem = this.tabsData[index];
					navItem.loadingType = 'more'
					navItem.current_page = 1
					navItem.goodsData = []
					this.loadData();
				}

			},
			loadData(source) { // 获取商品列表

				let index = this.indexTabs;
				let navItem = this.tabsData[index];
				let status = navItem.key
				console.log('loadData', index, navItem);
				if (source == 'search') {
					navItem.current_page = 1
					navItem.loadingType = 'more'
					navItem.goodsData = []
				}
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				let url, data
				if (this.indexTabs == 1 || this.indexTabs == 3) {
					url = '/wanlshop/product/lists'
					data = {
						status: status,
						page: navItem.current_page
					}
				} else {
					// let location =
					// 	`${uni.getStorageSync('address').location.lng},${uni.getStorageSync('address').location.lat}`
					url = '/wanlshop/product/shopList'
					data = {
						page: navItem.current_page,
						type: navItem.key,
						limit: '15'
					}
				}

				if (this.keyword.length > 0) {
					data['search'] = this.keyword
				}
				console.log(navItem.current_page)

				this.$api.get({
					url: url,
					loadingTip: '加载中...',
					data: data,
					success: res => {
						uni.stopPullDownRefresh();
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						let orderList = res.data;
						// navItem.goodsData.concat(orderList) -- 拼接不生效
						orderList.forEach(item => {
							navItem.goodsData.push(item);
						});
						console.log(navItem);
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
						console.log('this.tabsData', this.tabsData);
						setTimeout(() => {
							this.triggered = false
						}, 1000)
					}
				});
			},


			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.indexTabs = current;
				this.swiperCurrent = current;
				let navItem = this.tabsData[current];
				if (navItem.goodsData.length == 0) {
					this.loadData('search')
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.loadData()
			},
			change(type, data) { //导航栏
				console.log("type", type, data);
				this.swiperCurrent = data
			},
		},
	}
</script>

<style lang="scss" scoped>
	.c1a {
		color: #1A1A1A;
	}

	.fbdd {
		background-image: url('https://img.aibbyp.com/wechatUser/qwe1.png');
		background-size: 100% 100%;
		width: 100%;
		height: 136rpx;
		margin: 16rpx 0;
		padding: 16rpx 30rpx 16rpx 208rpx;
		line-height: normal;
	}

	.cgmsForBox1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;

		.itemImgBox {
			background: #f7f7f7;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			width: 96rpx;
			height: 96rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.itemImg {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.xxxx {
		position: relative;
		z-index: 999;
		right: 20rpx !important;
		bottom: 140rpx !important;
		/* #ifdef MP-WEIXIN */
		bottom: 160rpx !important;
		right: 80rpx !important;
		/* #endif */
		width: 80rpx;
		height: 80rpx;
		position: fixed;
	}

	.backTop {
		z-index: 1000;
	}

	.categoryBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.imgs {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.maskBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.maskBoxdata {
			width: 476rpx;
			height: 890rpx;
			background-image: url('https://img.aibbyp.com/wechatUser/masksmj.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			font-size: 40rpx;
			box-sizing: border-box;
			padding-top: 300rpx;
			text-align: center;

			.priceBox {
				margin-top: 120rpx;

				.price {
					font-size: 70rpx;
				}

				.pricedw {
					font-weight: 400;
					font-size: 24rpx;
				}
			}


		}

		.imgmj {
			color: #FD5241;
		}

		.imgzk {
			color: #FD5241;
		}

		.imgby {
			color: #497CF3
		}
	}

	.shop {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;

		.image-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 10rpx 0;

			.swiper-image {

				width: 120rpx;
				/* 假设每张图片占据一行的四分之一，即每行4张图片 */
				height: 120rpx;
				/* 根据需要调整图片高度 */
				object-fit: cover;
				border: 1rpx dashed #ccc;
			}

			.swiper-image:nth-child(-n+5) {
				margin-bottom: 24rpx;
			}
		}

		.imgSize {
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.swiperBox {
			flex: 1;
			overflow: hidden;

			.swiper-item {
				display: flex;
				flex-direction: column;
				height: 100%;
			}
		}

		.dataBox1 {
			flex: 1;
			padding: 0 24rpx;
			padding-bottom: 100rpx;
			/* #ifdef MP-WEIXIN */
			padding-bottom: 20rpx;

			/* #endif */
			.recommendBox {
				background-image: url('https://img.aibbyp.com/wechatUser/flbj.png');
				background-size: 100% 250rpx;
				background-repeat: no-repeat;
				width: 100%;
				height: 250rpx;
				padding: 24rpx 22rpx 18rpx;

				.recommendBoxText {
					text-align: right;
					font-size: 20rpx;
					color: #FD5241;
					margin-right: 40rpx;
				}

				.recommendBoxImg {
					background-size: 100% 100%;
					background-repeat: no-repeat;
					padding: 10rpx 20rpx 10rpx 20rpx;
					width: 324rpx;
					height: 162rpx;

					.price {
						font-size: 40rpx;
					}

					.limit {
						margin-top: -10rpx;
						margin-left: 28rpx;
						font-size: 16rpx;
						/* #ifdef MP-WEIXIN */
						margin-top: -4rpx;
						/* #endif */
					}

					.shopname {
						/* #ifdef MP-WEIXIN */
						margin-top: 48rpx;
						/* #endif */
					}
				}

				.recommendBoxImg1 {
					background-image: url('https://img.aibbyp.com/wechatUser/zkq.png');
				}

				.recommendBoxImg2 {
					background-image: url('https://img.aibbyp.com/wechatUser/yhq.png');
				}

				.recommendBoxImg3 {
					background-image: url('https://img.aibbyp.com/wechatUser/byq.png');
				}
			}

			.cgmsBox {
				margin-bottom: 12rpx;

				.cgms {
					width: 344rpx;
					height: 186rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.yhq {
						color: #FF3445;
						padding-top: 12rpx;
						width: 138rpx;
						height: 130rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.cgmsForBox {
						margin-top: 10rpx;
						width: 33.33%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}

					.itemImg {
						width: 80rpx;
						height: 80rpx;
						font-size: 20rpx;
						border-radius: 6rpx;
					}

					.itemText {
						text-align: center;
					}
				}

				.cg {
					background-image: url('https://img.aibbyp.com/wechatUser/xx00.png');
					position: relative;
					padding: 6rpx 24rpx;

					.xx22 {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 62rpx;
						z-index: 2;
						left: 0;
					}
				}

				.ms {
					padding: 48rpx 24rpx 18rpx;
					background-image: url('https://img.aibbyp.com/wechatUser/xx11.png');
				}
			}

			.scroll-Y {
				height: 100%;
			}

			.msFoxBox {
				background: #fff;
				padding: 28rpx 38rpx 20rpx;
				margin-bottom: 20rpx;

				.goodsBox:nth-child(n+2) {
					margin-left: 22rpx;
				}

				.goodsBox {
					width: 152rpx;

					.imggoods {
						width: 152rpx;
						height: 152rpx;
						border-radius: 6rpx;
					}
				}


				.msFoxBoxHeadImg {
					width: 124rpx;
					height: 124rpx;
					border-radius: 8rpx;
				}

				.rightBox {
					max-width: calc(100% - 150rpx);
				}

				.msiBac {
					background: linear-gradient(90deg, #FD5241 0%, #FE7046 23%);
					// height: 18rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					padding: 0 8rpx;
				}

				.msi1 {
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					flex-shrink: 0;

				}

				.msi2 {
					flex-shrink: 0;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
				}

				.msi3 {
					flex-shrink: 0;
					width: 132rpx;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					background-image: url('https://img.aibbyp.com/wechatUser/iconby.png');
				}

				.sdsj {
					font-size: 20rpx;
					color: #34C759;
				}

				.sdfy {
					background: rgba(255, 201, 196, 0.3);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 0rpx 16rpx;
					font-size: 20rpx;
					color: #FD5241;
				}
			}
		}

		.dataBox2 {
			padding: 0;
			padding-bottom: 100rpx;
			/* #ifdef MP-WEIXIN */
			padding-bottom: 20rpx;

			/* #endif */
		}

		.topBox {
			padding: 0 24rpx;
			margin-top: 30rpx;
			align-items: center;

			.dingwei {
				width: 28rpx;
				height: 28rpx;
			}

			.inputBox {
				align-items: center;
				background: #FFFFFF;
				border-radius: 128rpx 128rpx 128rpx 128rpx;
				border: 2rpx solid #FD5241;
				padding: 0 30rpx;
				color: #FD5241;
				height: 56rpx;
				margin-left: 34rpx;
			}
		}

		.tabsBox {
			padding: 0 24rpx;

			::v-deep.u-tab-item:nth-child(3) {}

		}
	}
</style>